<template>
    <div id="myChart" ></div>
</template>

<script>
    import {getloginCount} from "@/api/system/loginfo";
    export default {
        name: 'touch',
        data () {
            return {
                systemCountlist:[]
            }
        },
        mounted(){
            this.getlist();
        },
        methods: {
            getlist(){
                getloginCount().then(response => {
                    this.systemCountlist=response.data;
                    this.drawLine();
                });
            },
            drawLine(){
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('myChart'));
                var data = [];
                for (var i = 0; i < this.systemCountlist.length; i++) {
                    let system = this.systemCountlist[i];
                    data.push([system.time,system.value]);
                }
                var option = {
                    tooltip: {
                        trigger: 'axis',
                        position: function (pt) {
                            return [pt[0], '10%'];
                        }
                    },
                    title: {
                        left: 'center',
                        text: '系统登录统计图',
                    },
                    toolbox: {
                        left:'left',
                        feature: {
                            dataZoom: {
                                yAxisIndex: 'none'
                            },
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'time',
                        splitLine: {
                            show: false
                        }
                    },
                    yAxis: {
                        type: 'value',
                        boundaryGap: [0, '100%']
                    },
                    dataZoom: [{
                        type: 'inside',
                        start: 0,
                        end: 20
                    }, {
                        start: 0,
                        end: 20
                    }],
                    series: [
                        {
                            name: '登录访问量',
                            type: 'line',
                            smooth: true,
                            symbol: 'none',
                            areaStyle: {},
                            data: data
                        }
                    ]
                };
                // 绘制图表
                myChart.setOption(option);
               /* // 绘制图表
                myChart.setOption({
                    title: { text: '系统登录统计图' },
                    tooltip: {},
                    xAxis: {
                        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                    },
                    yAxis: {},
                    series: [{
                        name: '销量',
                        type: 'bar',
                        data: [5, 20, 36, 10, 10, 20]
                    }]
                });*/
            }
        }
    }
</script>
<style scoped>

</style>